<template>
  <div>
    <el-button @click="isShow = true">点击打开弹框</el-button>
    <!-- el-dialog
            title:标题
            visible.sync:是否打开弹框
            width:宽度
               默认插槽：主体内容
               具名插槽footer:常用于放取消与确定按钮

         .sync:修饰符
             作用：值的双向绑定
             子组件标签  :xxx="fatherXxx"  @update:xxx="fatherXxx=$event"
             子组件标签  :xxx.sync="fatherXxx"
             子组件内：
                 props:['xxx']
                 this.$emit('update:xxx',实参值)
             v-model一个组件只能有一个，但是.sync一个组件可以有多个
     -->
    <el-dialog title="弹框标题" width="500px" :visible.sync="isShow">
      <div>我是主体内容</div>
      <template #footer>
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
    <hr>
    <!-- <Son :num="appNum" @update:num="appNum = $event" /> -->
    <Son :num.sync="appNum" />
  </div>
</template>
<script>
import Son from './components/son'
export default {
  components: {
    Son
  },
  data() {
    return {
      isShow: true,
      appNum: 1
    }
  }
}
</script>
<style></style>
